<template>
  <div class="searchList">
    <div class="searchInput">
      <mt-search v-model="value" placeholder="搜索"></mt-search>
      <mt-button type="default" @click="SearchData">搜索</mt-button>
    </div>
    <div class="four">
        <span >
            上架时间
        <i  class="fa fa-angle-up"></i>
        </span>
        <span>价格
            <i  class="fa fa-angle-up"></i>
        </span>
        <span>销量
            <i  class="fa fa-angle-up"></i>
        </span>
        <span>折扣
            <i  class="fa fa-angle-up"></i>
        </span>
    </div>
     <mt-loadmore  :bottom-method="loadBottom" :bottom-all-loaded="allLoaded"  ref="loadmore" bottomPullText='上拉加载刷新' :autoFill='false'>
    <div class="product clearfix">
      <router-link to="" v-for="(item,index) in prolist" :key="index">
        <img :src="'http://127.0.0.1:3000/'+item.pic[0].picAddr" alt>
        <div class="productDes">{{item.proName}}</div>
        <div>
          <span class="newPrice">￥{{item.price}}</span>
          <span class="oldPrice">￥{{item.oldPrice}}</span>
        </div>
        <mt-button type="primary">立即购买</mt-button>
      </router-link>
    </div>
     </mt-loadmore>
  </div>
</template>
<script>
import { SearchProduct } from '@/api/index.js'
export default {
  data () {
    return {
      value: '',
      oldlist: this.getHistoryData(),
      data: {
        proName: '',
        page: '1',
        pageSize: '2'
      },
      prolist: '',
      allLoaded: false
    }
  },
  mounted () {
    this.getSearchData()
  },
  methods: {
    SearchData () {
      if (this.value !== '') {
        this.oldlist.push(this.value)
        localStorage.setItem('SearchList', JSON.stringify(this.oldlist))
      } else {
        alert('空的')
      }
    },
    getHistoryData () {
      var oldlist = localStorage.getItem('SearchList')
      return JSON.parse(oldlist || [])
    },
    getSearchData () {
      this.data.proName = this.$route.params.key
      //   console.log(this.data)
      SearchProduct(this.data)
        .then(res => {
        //   console.log(res)
          this.prolist = res.data.data
          console.log(this.prolist[0])
        })
    },
    loadBottom () {
      setTimeout(() => {
        this.$refs.loadmore.onBottomLoaded()
      }, 1000)
    }
  }
}
</script>

<style lang="scss" scoped>
.searchList {
    padding-bottom: 66px;
    overflow: scroll;
  .searchInput {
    position: relative;
    .mint-search {
      height: 44px;
    }
    .mint-button {
      position: absolute;
      top: 0;
      right: 0px;
      z-index: 1;
      height: 43px;
      padding: 0 20px;
    }
  }
  .four {
      margin-top:5px;
      background-color: #ccc;
      height: 30px;
      line-height: 30px;
      display: flex;
      justify-content: space-between;
      padding: 0 20px;
  }
  .product {
      padding: 0 5px;
    .router-link-active {
        &:nth-child(even){
             margin-left: 2%;
        }
    text-decoration: none;
    float: left;
      width: 49%;
      padding: 10px;
      border: 1px solid #eee;
      color: #000;
    margin-top: 5px;
      img {
        display: block;
        width: 100%;
      }
      .productDes {
        font-size: 13px;
        display: -webkit-box;
        overflow: hidden;
        white-space: normal !important;
        text-overflow: ellipsis;
        word-wrap: break-word;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        margin-bottom: 5px;
      }
      .newPrice {
        color: red;
        font-size: 15px;
        padding-right: 10px;
      }
      .oldPrice {
        font-size: 13px;
      }
      .mint-button {
          display: block;
          margin: 0 auto;
          font-size:14px;
          height: 30px;
          line-height: 1;
          margin-top: 10px;
        //margin-top:20px ;
      }

    }
  }
  .isActive{
    color:red;
  }
}
</style>
